<template>
  <div v-if="!isMain && isView" class="view-equip-detail-wrap">
    <px-scrollbar class="view-equip-detail">
      <div style="display: flex; align-items: center; justify-content: space-between; margin: 16px 0 24px">
        <div style="display: flex; align-items: center">
          <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
          <div style="margin-right: 8px; margin-left: 16px; font-size: 20px; font-weight: bold; color: rgb(0 0 0 / 90%)">
            {{ formValue.inNum }}
          </div>
          <!-- 已通过 -->
          <span
            v-if="formValue.approveStatus === 'pass'"
            style="
              display: inline-block;
              height: 22px;
              padding: 0 8px;
              line-height: 22px;
              color: #10b981;
              text-align: center;
              background: #e8f8f3;
              border: 1px solid #b7ead9;
              border-radius: 4px;
            "
          >
            {{ formValue.approveStatusName }}
          </span>
          <!-- 审核中 -->
          <span
            v-else-if="formValue.approveStatus === 'approving'"
            style="
              display: inline-block;
              height: 22px;
              padding: 0 8px;
              line-height: 22px;
              color: #f59e0b;
              text-align: center;
              background: #fef5e6;
              border: 1px solid #fce2b6;
              border-radius: 4px;
            "
          >
            {{ formValue.approveStatusName }}
          </span>
          <!-- 已驳回 -->
          <span
            v-else-if="formValue.approveStatus === 'reject'"
            style="
              display: inline-block;
              height: 22px;
              padding: 0 8px;
              line-height: 22px;
              color: #9254de;
              text-align: center;
              background: #f2e7ff;
              border: 1px solid #ddc2ff;
              border-radius: 4px;
            "
          >
            {{ formValue.approveStatusName }}
          </span>
          <!-- 驳回修改 -->
          <span
            v-else-if="formValue.approveStatus === 'reject_modify'"
            style="
              display: inline-block;
              height: 22px;
              padding: 0 8px;
              line-height: 22px;
              color: #ef4444;
              text-align: center;
              background: #feecec;
              border: 1px solid #fac7c7;
              border-radius: 4px;
            "
          >
            {{ formValue.approveStatusName }}
          </span>
        </div>
        <div class="buttonPlus">
          <!-- 审核中状态+是审核人才能转审/审核 v-if="isUserId && formValue.approveStatus === 'approving'" -->
          <div v-if="isUserId && formValue.approveStatus === 'approving'">
            <px-button type="primary" plain @click="checkVisible = true">审核</px-button>
          </div>
          <!-- v-if="isUserId1 && formValue.approveStatus === 'approving'" -->
          <!-- <div v-if="isUserId1 && formValue.approveStatus === 'approving'">
            <px-button type="primary" plain @click="toCheckVisible = true">转审</px-button>
          </div> -->
          <div
            v-if="
              (formValue.purchaseNum == '' || formValue.purchaseNum == null) &&
              formValue.inUserId == props.userId &&
              formValue.approveStatus === 'pass' &&
              formValue.inType === 'NPPA'
            "
          >
            <px-button type="primary" @click="handlePurchaseNum">补充采购单号</px-button>
          </div>
        </div>
      </div>
      <div class="view-equip-title">入库详情</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">入库类型</div>
            <div class="text">{{ formValue.inType || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库单号</div>
            <div class="text">{{ formValue.inNum || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">操作人员</div>
            <div class="text">{{ formValue.inUserName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">申请时间</div>
            <div class="text">{{ formValue.actTime || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库时间</div>
            <div class="text">{{ formValue.inDate || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">审批人</div>
            <!-- <div class="text">{{ formValue?.userDTOList?.[0].username }}-{{ formValue?.userDTOList?.[0].realName }}</div> -->
            <div class="text">{{ formValue.userDTOList || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">备注</div>
            <div class="text">{{ formValue?.remark || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div v-if="formValue.inType !== 'Other'" class="view-equip-item">
            <div v-if="formValue.inType === 'PR/PO'" class="label">关联PO单号</div>
            <div v-if="formValue.inType === 'MM领用'" class="label">关联MM领用单号</div>
            <div v-if="formValue.inType === 'NPPA'" class="label">关联NPPA系统单号</div>
            <div class="text">{{ formValue.purchaseNum || "-" }}</div>
          </div>
          <div v-if="formValue.inType !== 'Other'" class="view-equip-item large">
            <div class="label">申请人员</div>
            <div class="text">{{ formValue.purchaseUser || "-" }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title" style="margin-top: 32px">物资清单</div>
      <px-table :data="formValue.approvalRecordDTOList" class="equip-table" size="small" max-height="400" border style="margin-bottom: 24px">
        <px-table-column type="index" label="序号" min-width="60" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in inventoryDetailDTOList"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <span v-if="item.materialSupplier">{{ scope.row.materialSupplier?.name }}</span>
            <span v-else>
              {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
            </span>
          </template>
        </px-table-column>
      </px-table>
    </px-scrollbar>
  </div>
  <!-- 审核弹窗 -->
  <CheckDialog
    :dialogVisible="checkVisible"
    :busId="formValue.inNum"
    :approverId="userId"
    :username="username"
    @closeDialog="
      checkVisible = false;
      getDetail();
    "
  />
  <!-- 转审弹窗 -->
  <ToCheckDialog
    :dialogVisible="toCheckVisible"
    :busId="formValue.inNum"
    :approverId="userId"
    :username="username"
    type="wareHousing"
    @closeDialog="toCheckVisible = false"
  />
  <!-- 采购信息弹窗 -->
  <PurchaseNumDialog
    :dialogVisible="dialogVisible"
    :sparePartsId="sparePartsIdPlus"
    @closeDialog="
      dialogVisible = false;
      getDetail();
    "
    @backMainPage="backMainPage"
  />
</template>

<script setup lang="ts">
import { reactive, toRefs, watch, computed } from "vue";
import { querynInventoryList, queryByInNum, userQueryByPosition } from "@/api/erc/material";
import ToCheckDialog from "../components/ToCheckDialog.vue";
import CheckDialog from "../components/CheckDialog.vue";
import PurchaseNumDialog from "../components/PurchaseNumDialog.vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable"]);
// 父级传过来的值
const props = defineProps(["num", "isMain", "isView", "username", "sparePartsId", "updateName", "rowData", "userId"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 页面本身的值
const state = reactive<any>({
  formValue: {
    inNum: "",
    remark: "",
    supplier: "",
    approveStatus: "",
    approvalRecordDTOList: [],
    userDTOList: []
  },
  checkVisible: false,
  toCheckVisible: false,
  dialogVisible: false,
  sparePartsIdPlus: "",
  inventoryDetailDTOList: [
    { prop: "name", label: "物资名称", minWidth: "120", showOverflowTooltip: true, fixed: "left" },
    { prop: "typeName", label: "物资类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "materialCode", label: "物资编码", minWidth: "120", showOverflowTooltip: true },
    { prop: "brand", label: "品牌", minWidth: "120", showOverflowTooltip: true },
    { prop: "specification", label: "型号/规格", minWidth: "120", showOverflowTooltip: true },
    { prop: "unit", label: "单位", minWidth: "120", showOverflowTooltip: true },
    { prop: "storeLocation", label: "存放地块", minWidth: "120", showOverflowTooltip: true, facCode: true },
    { prop: "quantity", label: "入库数量", minWidth: "120", showOverflowTooltip: true },
    { prop: "supplier	", label: "AVL厂商", minWidth: "120", showOverflowTooltip: true, materialSupplier: true },
    { prop: "productionDate", label: "生产日期", minWidth: "120", showOverflowTooltip: true },
    { prop: "expirationDate", label: "过期日期", minWidth: "120", showOverflowTooltip: true }
  ],
  isUserId: false, //判断审批权限
  isUserId1: false, //判断转审权限
  userIdPlus: ""
});

const { formValue, inventoryDetailDTOList, checkVisible, toCheckVisible, dialogVisible, sparePartsIdPlus, isUserId, isUserId1, userIdPlus } =
  toRefs(state);
// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && props.isView) {
    getDetail();
    const userInfo = JSON.parse(localStorage.getItem("userInfo"));
    userIdPlus.value = userInfo.userId;
    queryByPosition();
    queryByPosition1();
  }
});
//补充采购信息
const handlePurchaseNum = () => {
  dialogVisible.value = true;
  sparePartsIdPlus.value = props.sparePartsId;
};
// 查询数据
const getDetail = async () => {
  const params = {
    num: props.num
  };
  const data1 = await queryByInNum(params);
  formValue.value = data1;
  formValue.value.userDTOList = formValue.value.userDTOList.map(item => {
    return `${item.username}-${item.realName}`;
  });
  formValue.value.userDTOList = formValue.value.userDTOList.join(",");
  const data = await querynInventoryList(params);
  formValue.value.approvalRecordDTOList = data;
};
//根据岗位ID获取用户信息接口
const queryByPosition = async () => {
  // 消防系统物资出入库审批专员岗位ID
  const data = await userQueryByPosition([59]);
  const arrNew = data.map(item => {
    return item.userId;
  });
  if (arrNew.includes(userIdPlus.value)) {
    return (isUserId.value = true);
  } else {
    return (isUserId.value = false);
  }
};
const queryByPosition1 = async () => {
  // 消防系统物资出入库转审专员岗位ID
  const data1 = await userQueryByPosition([60]);
  const arrNew1 = data1.map(item => {
    return item.userId;
  });
  if (arrNew1.includes(userIdPlus.value)) {
    return (isUserId1.value = true);
  } else {
    return (isUserId1.value = false);
  }
};
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
  formValue.value.approvalRecordDTOList = [];
  emits("queryTable");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
@import url("@/views/erc/scss/view-detail.scss");

.buttonPlus {
  display: flex;

  button {
    margin-left: 10px;
  }
}

:deep(.label) {
  width: 180px !important;
}
</style>
